<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <script src="../js/jquery/jquery.js"></script>
    <script type="text/javascript" src="../js/template/handlebars-v1.3.0.js"></script>
    <link rel="stylesheet" href="../css/jquery_mobile/jquery.mobile-1.4.2.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <script src="../js/jquery/jquery.js"></script>
    <script src="../js/jquery_mobile/jquery.mobile-1.4.2.js"></script>
    <link rel="stylesheet" href="../css/jquery_mobile/jquery.mobile-1.4.2.css"/>

</head>

<body>
<div data-role="page">
    <link rel="stylesheet" href="../css/jquery_mobile/jquery.mobile-1.4.2.css"/>
    <script src="../js/jquery/jquery.cookie.js"></script>
    <header data-role="header" data-theme="b">
        <a href="#" data-rel="back"
           class="ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left ui-btn-icon-notext">Back</a>

        <h1>购物车</h1>
    </header>
    <div data-role="content" class="content">
        <script src="../js/jquery/jquery.cookie.js"></script>
        <script id="item-template" type="text/x-handlebars-template">
            {{#each books}}
            <li><a href="{{link}}">
                <img src="../pic/book_list/{{img}}">

                <h2>{{name}}</h2>

                <p>{{money}}</p></a>
                <span class="ui-li-count">{{count}}</span>
            </li>
            {{/each}}
        </script>
        <script>
            $(function () {

                /**
                 * 根据用户是否登陆进行显示查看订单按钮
                 */
                var log_user = $.cookie("log-user");
                if(log_user != null) {
                    $("#btn-my-order").show();
                    $("#btn-my-order").attr("href","填写查看订单相应的url链接");
                }

                $.getJSON("../json/books_list.json",function(data,status){
                    var strJson = JSON.stringify(data);
                    var dataObj=eval("("+strJson+")");
                    var myTemplate = Handlebars.compile($("#item-template").html());
                    $("#swipeMe").append(myTemplate(dataObj));
                    /**
                     * 添加上此句代码，则不会样式丢失
                     */
                    $("#swipeMe").listview('refresh');
                });

                $("#btn-buy").click(function () {
                    alert("支付页面正在设计!");
                });
                $("#btn-skim").attr("href", "product_list.html");
            });
        </script>
        <link rel="stylesheet" href="../css/jquery_mobile/jquery.mobile-1.4.2.css"/>
        <script src="../js/jquery_mobile/jquery.mobile-1.4.2.js"></script>

        <ul data-role="listview" data-inset="true" id="swipeMe">
            <li><a href="book_check.html">
                <img src="../pic/book_list/album-bb.jpg">

                <h2>香港澳门三天游</h2>

                <p>￥600</p></a>
                <span class="ui-li-count">12</span>
            </li>
            <li><a href="#">
                <img src="../pic/book_list/album-hc.jpg">

                <h2>泰国七天游</h2>

                <p>￥200</p></a>
                <span class="ui-li-count">12</span>
            </li>
            <li><a href="#">
                <img src="../pic/book_list/album-p.jpg">

                <h2>欧洲五天游</h2>

                <p>￥8000</p></a>
                <span class="ui-li-count">12</span>
            </li>
        </ul>
        <a id="btn-buy" style="text-decoration: none">
            <button class="ui-btn ui-btn-b ui-shadow ui-corner-all ui-btn-icon-left ui-icon-check">确认购买</button>
        </a>
        <a id="btn-my-order" style="text-decoration: none; display: none">
            <button class="ui-btn ui-btn-b ui-shadow ui-corner-all ui-btn-icon-left ui-icon-check">我的订单</button>
        </a>
        <a id="btn-skim" style="text-decoration: none">
            <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-shop">返回浏览</button>
        </a>
    </div>
</div>
</body>
</html>